<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px auto;
            /* 
            transition 设置过渡动画的属性
            第一个参数是过渡动画要过渡的css属性名
            第二个是过渡动画过程的时间
            第三个参数是过渡动画的动画状态 
            第四个参数是执行过渡动画要延迟的时间（等多少时间后再进行动画）
            */
            /* transition: all 3s ease 2s; */
            /* 
            animation 第一个参数是自定义的动画名字
            第二个参数是动画执行的过程时间
            第三个蚕食是动画执行的状态 例如linear 匀速
            第四个delay 动画执行的延迟时间、
            第五个iteration-count 动画反复执行的次数 可以写具体的数子表示具体的次数 也可以写infinite表示无限重复动画
            第六个direction 动画执行的方向
            第七个fill-mode 动画执行结束后的状态
            
            */
            animation: aaa 1s linear forwards;
            /* transform: ; 定义的动画有平移 旋转 缩放 倾斜 */
        }

        /* div:hover {
            width: 1000px;
            height: 200px;
        } */
        @keyframes aaa {
            /* from {
                width: 100px;
            }
            to {
                width: 200px;
            } */
            0% {
                /* width: 100px; */
                /* scale 缩放的意思 1表示正常大小 
                    rotate 表示旋转 参数是要旋转的角度
                */
                transform: scale(1)  translate(0px, 0px) skew(0deg);
            }
            50% {
                /* width: 500px; */
                transform: scale(2)  translate(200px, 200px) skew(45deg);
            } 
            100% {
                /* width: 1000px; */
                transform: scale(0.5) translate(0px, 0px) skew(0deg);
            }
        }



    </style>
</head>
<body>
    <!-- 
        动画分为过渡动画和动画 
        过渡动画：过渡动画就是只有开始和结束两个状态的动画 过渡动画需要手动触发 
        动画： 有动画过程的动画 可以直接触发
     -->

     <div></div>
</body>
</html>